<template>
	<view class="container">
		<view class="con">
			<view class="conitem" v-for="(item,index) in list" :key="index">
				<image class="avatar" :src="item.avater" mode="aspectFill"></image>

				<view class="itemtop">
					<text class="nickname">{{item.nickname}}</text>
					<view class="title">
						{{item.title}}
						<image style="width: 13rpx;height: 24rpx;margin-left: 12rpx;" src="/static/img/more.png"
							mode="widthFix"></image>
					</view>
				</view>
				<view class="itemmid" v-if="item.accept_id==0">
					评论 {{item.created_at}}
				</view>
				<view class="itemmid" v-else>
					回复 {{item.created_at}}
				</view>
				<view class="content">
					{{item.comment}}
				</view>

				<view class="btn" @click="huifu(index)" v-if="userinfo.user_id==item.accept_id&&item.accept_id!=0">
					回复
				</view>
				<view class="btn" @click="huifu(index)" v-if="item.accept_id==0">
					回复
				</view>
			</view>
		</view>
		<u-loadmore :status="status" @loadmore="onre" />

		<u-popup :show="show" @close="show=false" mode="bottom">
			<view v-if="show" :style="{paddingBottom:height+'px'}">
				<view class="textbox">
					<u--textarea autoHeight :disableDefaultPadding='true' :cursor='list[curindex].text.length'
						placeholderStyle='color: #fff' v-model="list[curindex].text" :showConfirmBar='false'
						placeholder="请输入内容" :focus='focus' :adjustPosition='false'></u--textarea>
					<view class="sendbox" @click="send">
						发送
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getMyCommentList,
		makeComment
	} from '@/api/dymic.js'
	export default {
		data() {
			return {
				show: false,
				value1: '',
				focus: true,
				list: [],
				height: 0,
				curindex: null,
				userinfo: {},
				status: 'loadmore',
				page: 1,
				last_page:0
			}
		},
		onLoad() {
			let _this = this
			uni.onKeyboardHeightChange(res => {
				// console.log(res.height)
				_this.height = res.height
			})
			this.userinfo = uni.getStorageSync('userinfo')
			this.getlist()
		},
		onShow() {
			this.focus = true
		},
		methods: {
			huifu(index) {
				this.show = true
				this.curindex = index
				// console.log(item)
			},
			send() {
				let item = this.list[this.curindex]
				console.log(this.list[this.curindex])
				let comment_id=null
				if(item.accept_id==0){//评论
					comment_id=item.id
					
				}else{
					comment_id=item.comment_id
				}
				
				makeComment({
					comment_id: comment_id,
					dymic_id: item.dymic_id,
					comment: item.text,
					accept_id: item.user_id
				}).then(res => {
					console.log(res)
					this.show = false
					item.text=''
					this.list=[]
					this.getlist()
				})
			},
			getlist() {
				getMyCommentList().then(res => {
					uni.stopPullDownRefresh()
					this.status='loadmore'
					this.last_page=res.data.data.last_page
					this.list=[...this.list,...res.data.data.data]
					this.list.map(t => {
						t.text = ''
					})
				})
			},
			onre(){
				this.page++
				if(this.page<=this.last_page){
					this.getlist()
				}else{
					this.status='nomore'
				}
			},
			
		},
		onPullDownRefresh() {
			this.list=[]
			this.page=0
			this.getlist()
			
		},
		onReachBottom() {
			this.onre()
		},
	}
</script>

<style lang="less">
	.container {
		border-top: #F4F6F8 solid 2rpx;
		padding-left: 31rpx;
	}

	.conitem {
		border-bottom: 3rpx #FBFBFB solid;
		padding-right: 30rpx;
		padding-left: 66rpx;
		position: relative;
		padding-top: 42rpx;
		padding-bottom: 30rpx;

		.avatar {
			width: 56rpx;
			height: 56rpx;
			border-radius: 50%;
			position: absolute;
			left: 0;
			top: 31rpx;
		}

		.itemtop {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 30rpx;
			color: #333;
			line-height: 30rpx;

		}

		.itemmid {
			color: #949492;
			font-size: 26rpx;
			line-height: 26rpx;
			margin: 31rpx 0 25rpx;
		}

		.content {
			font-size: 28rpx;
			color: #333;
			width: 490rpx;
		}

		.btn {
			padding: 0 34rpx;
			line-height: 60rpx;
			background: #FFE5D4;
			border-radius: 30rpx;
			font-size: 28rpx;
			color: #FF7D12;
			position: absolute;
			bottom: 32rpx;
			right: 30rpx;
		}
	}

	.textbox {
		padding: 30rpx;
		display: flex;
		align-items: center;

		.sendbox {
			padding: 0 28rpx;
			line-height: 63rpx;
			background: linear-gradient(265deg, #FF8717, #FF5F00);
			border-radius: 32rpx;
			color: #fff;
			font-size: 28rpx;
			margin-left: 19rpx;
		}
	}

	.u-textarea {
		background-color: #F9F9F9;
	}
</style>
